<template>
  <div class="detail" style="background-color: #f2f2f2">
    <div class="header">
      <van-nav-bar title="详情" @click-left="onClickLeft">
        <template #right>
          <van-popover
            v-model="showPopover"
            trigger="click"
            :actions="actions"
            placement="bottom-end"
            theme="dark"
            @select="onSelect"
          >
            <template #reference>
              <van-icon name="ellipsis" size="30" color="black" />
            </template>
          </van-popover>
        </template>
        <template #left>
          <van-icon name="arrow-left" size="30" color="black" />
        </template>
      </van-nav-bar>
    </div>
    <!-- 轮播图 -->
    <div
      class="container"
      style="background-color: #fff; border-radius: 0 0 15px 15px"
    >
      <van-swipe @change="onChange">
        <van-swipe-item v-for="(item, index) in bannerList" :key="index"
          ><img style="width: 100%; height: 375px" :src="item"
        /></van-swipe-item>
        <template #indicator>
          <div class="custom-indicator">{{ current + 1 }}/5</div>
        </template>
      </van-swipe>
      <!-- <van-swipe class="my-swipe" :autoplay="3000">
        <van-swipe-item v-for="(item, index) in bannerList" :key="index">
          <img :src="item" />
        </van-swipe-item>
      </van-swipe> -->
      <div class="price">
        <p>￥{{ price }}</p>
      </div>
      <div style="font-size: 14px; padding-left: 14px">
        <img
          style="width: 0.4rem"
          src="https://img12.360buyimg.com/img/s100x32_jfs/t1/101725/30/30167/2451/63035363E7fe29976/2a8a8cc4bf561d9b.png"
          alt=""
        />
        一站式屯生活好物
      </div>
      <div class="title">
        <img
          style="width: 0.2rem"
          src="https://img12.360buyimg.com/img/s48x26_jfs/t1/134936/19/4552/1458/5f0fd238E688140ef/dc3f7acfff4a1ee7.png"
          alt=""
        />
        <span>{{ title }}</span>
      </div>
      <div class="desc">
        <p
          class="van-multi-ellipsis--l2"
          style="
            color: #262626;
            font-size: 12px;
            line-height: 1.3;
            padding: 0 0 22px 0;
          "
        >
          【365天以换代修】累计销售超50万个、国标品质、水晶超柔面料，手感舒适，持久锁温,开合充电夹、防爆安全【暖手宝仅需29.9】
        </p>
      </div>
    </div>
    <!-- 视频图标 -->
    <div
      style="
        position: absolute;
        background-color: #999;
        top: 60%;
        z-index: 1;
        left: 48%;
      "
      @click="fang"
    >
      <van-icon name="play" />1"05"
    </div>
    <!-- 视频 -->
    <div v-if="show">>
      <van-overlay :show="show" @click="show=false">
        <div class="wrapper" @click.stop @click="show=false">
          <div class="block" style="width: 100%; height: 50%" @click="show=false"><video
            style="width: 100%; height: 80%"
            preload="auto"
            webkit-playsinline="true"
            controls
            autoplay
            src="https://jvod.300hu.com/vod/product/aeae14bc-e58e-45aa-89eb-32f492ea9bc8/40bff556abd84790877004d036ac8674.mp4"
          ></video></div>
          
        </div>
      </van-overlay>
    </div>
    <!-- 优惠券 -->
    <div></div>
    <!-- 猜你喜欢 -->
    <div style="display: flex; flex-wrap: wrap; justify-content: space-around">
      <div
        style="
          width: 47%;
          border-radius: 10px;
          margin-top: 10px;
          background-color: #fff;
        "
        v-for="(item, index) in proList"
        :key="index"
        @click="jumpTo1(item.proid)"
      >
        <img
          style="width: 100%; border-radius: 10px 10px 0 0"
          :src="item.img1"
          alt=""
        />
        <div>
          <h4 class="van-multi-ellipsis--l2">{{ item.proname }}</h4>
          <p class="prices">￥{{ item.originprice }}</p>
        </div>
      </div>
    </div>
    <!-- 底部购物车 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon icon="cart-o" text="购物车" />
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="addCart"
      />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
    <!-- 立即分享 -->
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect1"
    />
  </div>
</template>

<script>
import { addCartList, getBannerList } from "../api/detail";
import { doRecommendList } from "../api/home";
import Vue from "vue";
import {
  NavBar,
  Popover,
  ShareSheet,
  GoodsAction,
  GoodsActionIcon,
  GoodsActionButton,
  CouponCell,
  CouponList,
  Toast,
  Overlay,
} from "vant";
Vue.use(NavBar);
Vue.use(Popover);
Vue.use(ShareSheet);
Vue.use(GoodsAction);
Vue.use(GoodsActionButton);
Vue.use(GoodsActionIcon);
Vue.use(CouponCell);
Vue.use(CouponList);
Vue.use(Toast);
Vue.use(Overlay);
export default {
  data() {
    return {
      show: false,
      num: 1,
      current: 0,
      bannerList: [],
      proList: [],
      showPopover: false,
      actions: [
        { text: "首页", icon: "wap-home-o" },
        { text: "分享", icon: "share-o" },
      ],
      showShare: false,
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
      price: 0,
      title: "",
    };
  },
  created() {
    getBannerList(this.$route.params.proid).then((data) => {
      //   console.log(data.data.data.banners[0].split(","));
      this.bannerList = data.data.data.banners[0].split(",");
      this.title = data.data.data.proname;
      this.price = data.data.data.originprice;
    });
    doRecommendList().then((data) => {
      console.log(data.data.data);
      this.proList = data.data.data;
    });
  },
  methods: {
    fang() {
      this.show = true;
    },
    onChange(index) {
      this.current = index;
    },
    onClickLeft() {
      this.$router.back();
    },
    jumpTo1(proid) {
      this.$router.push("/detail/" + proid);
      // this.$router.push({ path: "/detail", params: { proid } });
      window.location.reload(); //页面自动刷新
    },
    onSelect(action, index) {
      switch (index) {
        case 0:
          this.$router.push("/home");
          break;
        case 1:
          this.showShare = true;
          break;
        default:
          break;
      }
    },
    onSelect1(option) {
      console.log(option.name);
      this.showShare = false;
    },
    addCart() {
      // 判断是否登陆
      if (!localStorage.getItem("token")) {
        this.$router.push("/login");
      } else {
        // 调用接口加入购物车
        localStorage.getItem("token");
        let id = localStorage.getItem("userid");
        let priod = this.$route.params.proid;
        // console.log(id,priod);
        addCartList({ userid: id, proid: priod, num: this.num }).then((res) => {
          console.log(res, "加入购物车成功");
          Toast("加入购物车成功");
          this.$router.push("/cart");
        });
      }
    },
  },
};
</script>

<style scoped>
.my-swipe {
  height: 2.5rem;
}
.my-swipe img {
  width: 100%;
  height: 100%;
}
.price,
.title,
.desc {
  padding: 0px 15px;
  margin: 10px 0;
}
.price p {
  color: red;
}
.prices {
  color: red;
}
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}
</style>